<template>
    <div id="accountNumManage">
        <div class="HouseManagement-top">
            <el-input v-model="searchVal" placeholder="请输入搜索内容" prefix-icon="el-icon-search"></el-input>
            <el-button>重置</el-button>
        </div>
        <div class="HouseManagement-table">
            <el-table
            :data="TableData.slice((currentPage-1) * pagesize, currentPage * pagesize)"
            :header-cell-style="{background:'#eef1f6'}"
            style="width:100%">
                <el-table-column
                prop="a"
                label="序号"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="b"
                label="用户ID"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="c"
                label="姓名"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="d"
                label="联系方式"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="e"
                label="邮箱"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="f"
                label="部门"
                min-width="12%">
                </el-table-column>
                <el-table-column
                prop="g"
                label="权限"
                min-width="12%">
                </el-table-column>
                <el-table-column
                align="center"
                prop="option"
                label="操作"
                min-width="10%">
                <template slot-scope="scope">
                    <span @click="Popup('Mybutton','fade', scope.row)">
                        <i class="el-icon-edit"></i>
                    </span>
                    <span>
                        <i class="el-icon-delete"></i>
                    </span> 
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页按钮 -->
            <div class="block paginationBlock" style="right:2%;bottom:2%;">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                :page-sizes="[8, 16, 24, 32]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        <!--弹出层时的遮罩层-->
        <div id="fade" class="black_overlay"></div>
        <!-- 弹出的内容 -->
        <div id="Mybutton" class="white_content popupWidth-PRManage">
            <Popup ref="comp"></Popup>
            <!-- 点击关闭弹出层 -->
            <span style="font-size: 16px;" @click="CloseDiv('Mybutton','fade')">X</span>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import "@/assets/css/popup";
.popupWidth-PRManage{
    width: 70%;
    height: 70%;
    left:15%;
    transform: translateX(-15%);
    top: 50%;
    transform: translateY(-50%);
}
#accountNumManage{
    flex: 1;
    padding: 20px;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    .HouseManagement-top{
        padding: 24px;
        border-radius: 2px;
        background-color: white;
        text-align: left;
        margin-bottom: 1%;
        .el-select, .el-input{
            width: 25vh;
            margin-right: 1%;
        }
    }
    .HouseManagement-table{
        padding: 24px;
        border-radius: 2px;
        background-color: white;
        flex: 1;
        position: relative;
        .el-table{
            span{
                width: 50%;
                float: left;
            }
        }
    }
}
</style>
<script>
import $ from 'jquery'
import Popup from "@/viewsF/jurisdictionManage/role/UserPopup"
export default {
    components:{
        Popup
    },
    data(){
        return{
            searchVal: '',
            TableData: [
                {
                    id: 1,
                    a: '01',
                    b: '03214568996',
                    c: '王建军',
                    d: '1564798562',
                    e: '123456@qq.com',
                    f: '物业部门',
                    g: '房源信息管理'
                }
            ],
            // 当前页数
            currentPage: 1,
            // 总数量 
            total: null,
            // 每页数量 
            pagesize: 8,
        }
    },
    methods:{
        // 分页
        handleSizeChange(val) {
            this.pagesize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 弹窗
        ShowDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='block';
            document.getElementById(bg_div).style.display='block' ;
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $("#"+bg_div).height($(document).height());
        },
        Popup(Mybutton,bg_div,data){
            $('.popupWidth-PRManage').css({"width":"40%", "height": "70%", "left": "30%", "padding": "0px"})
            this.$refs.comp.getData(data)
            this.ShowDiv(Mybutton,bg_div)
        },
        // 关闭弹窗
        CloseDiv(Mybutton,bg_div){
            document.getElementById(Mybutton).style.display='none';
            document.getElementById(bg_div).style.display='none';
        },
    },
    created(){},
    mounted(){
        this.total = this.TableData.length
    },
}
</script>